<template>
    <div class="box">
        <div>
            <el-card>
                <div>
                    <el-form :inline="true"  :model="userFormData">
                       <el-form-item  label="用户名 :" class="item">
                           <el-input v-model="userFormData.username" placeholder="请输入用户名"></el-input>
                       </el-form-item>
                       <el-form-item label="昵称 :" class="item">
                           <el-input v-model="userFormData.nickName" placeholder="请输入昵称"></el-input>
                       </el-form-item>
                       <el-form-item label="是否禁用" class="item">
                           <el-radio v-model="userFormData.isDeleted" :label="0" border="true" style="margin-right: 0">启用</el-radio>
                           <el-radio v-model="userFormData.isDeleted" :label="1" border="true">禁用</el-radio>
                       </el-form-item>
                       <!--<el-form-item label="创建时间" class="item">
                           <el-date-picker
                                   type="date"
                                   v-model="userFormData.gmtCreate"
                                   aria-placeholder="请输入创建时间"
                           ></el-date-picker>
                       </el-form-item>-->
                       <el-form-item >
                           <el-button type="primary" icon="el-icon-search" plain round @click="searchBtn"></el-button>
                           <el-button type="primary" icon="el-icon-circle-plus-outline" plain round @click="addBtn"></el-button>
                           <el-button type="primary" icon="el-icon-refresh-right" plain round @click="refreshPage"></el-button>
                       </el-form-item>
                   </el-form>
                    <template>
                        <el-table
                            class="tableBox"
                            :data="tableData"
                            :border="true"
                            stripe
                        >
                            <el-table-column
                                    prop="id"
                                    label="用户id"
                                    align="center"
                            ></el-table-column>
                            <el-table-column
                                    prop="username"
                                    label="用户名"
                                    align="center"
                            ></el-table-column>
                            <el-table-column
                                    prop="nickName"
                                    label="昵称"
                                    align="center"
                            ></el-table-column>
                            <el-table-column
                                    prop="idDeleted"
                                    label="是否禁用"
                                    align="center">
                                <template slot-scope="scope">
                                    <el-switch
                                            v-show="scope.row.id==='1'"
                                            v-model="scope.row.isDeleted"
                                            prop="isDeleted"
                                            disabled
                                            active-text="启用"
                                            :active-value="0"

                                            inactive-text="禁用"
                                            :inactive-value="1"
                                            @change="changeSwitch(scope.row)">
                                    </el-switch>
                                    <el-switch
                                            v-show="scope.row.id !== '1'"
                                            v-model="scope.row.isDeleted"
                                            prop="isDeleted"
                                            active-text="启用"
                                            :active-value="0"

                                            inactive-text="禁用"
                                            :inactive-value="1"
                                            @change="changeSwitch(scope.row)">
                                    </el-switch>
                                </template>
                            </el-table-column>

                            <el-table-column
                                    prop="gmtCreate"
                                    label="创建时间"
                                    align="center"
                            ></el-table-column>
                            <el-table-column
                                    label="操作"
                                    width="235px"
                                    align="center"
                            >
                                <template slot-scope="scope">
                                    <el-button type="danger" size="small" plain round @click="delBtn(scope.row.id)">删除</el-button>
                                    <el-button type="primary" size="small" plain round @click="editBtn(scope.row)">修改</el-button>
                                    <el-button type="primary" size="small" plain round @click="roleBtn(scope.row.id)">设置角色</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[5,10, 15, 20]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total"
                        ></el-pagination>
                    </template>
                </div>
            </el-card>
        </div>
        <!--添加用户信息表单-->
        <div>
            <el-dialog
                    title="添加用户信息"
                    :visible.sync="addDialogVisible"
                    width="30%"
                    @close="closeAddDialog"
            >
                <el-form :model="addUserFormData" ref="addUserFormRef" :rules="formRules" label-width="100px">
                    <el-form-item label="用户id:" prop="id" hidden>
                        <el-input type="text" v-model="addUserFormData.id" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名:" prop="username" style="background-color: white">
                        <el-input type="text" v-model="addUserFormData.username" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称:" prop="nickName" >
                        <el-input type="text" v-model="addUserFormData.nickName" style="width: 80%;background-color: white" ></el-input>
                    </el-form-item>
                    <el-form-item label="密码:" prop="password">
                        <el-input type="password" v-model="addUserFormData.password" style="width: 80%;background-color: white"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="">
                    <el-button @click="addDialogVisible=false">取消</el-button>
                    <el-button @click="addUser">确认</el-button>
                </span>
            </el-dialog>
        </div>
        <!--修改用户信息-->
        <div>
            <el-dialog
                    title="修改用户信息"
                    :visible.sync="editDialogVisible"
                    width="30%"
                    @close="closeEditDialog"
            >
                <el-form :model="editUserFormData" ref="editUserFormRef" :rules="formRules" label-width="100px">
                    <el-form-item label="用户id" prop="id" hidden>
                        <el-input type="text" v-model="editUserFormData.id" autocomplete="off" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" prop="username">
                        <el-input type="text" v-model="editUserFormData.username" autocomplete="off" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="nickName">
                        <el-input type="text" v-model="editUserFormData.nickName" autocomplete="off" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="editUserFormData.password" autocomplete="off" style="width: 80%"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editUser">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <!--显示角色信息（表格）-->
        <div >
            <el-dialog
                    title="用户——设置角色"
                    :visible.sync="editRoleDialogVisible"
                    width="50%"
                    style="padding: 0 20px 30px"
                    class="role_dialog"
            >
                <template>
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <el-checkbox-group v-model="checkedRoles" @change="handCheckedRolesChange">
                        <el-checkbox v-for="role in roles" :label="role.id" :key="role.id">{{role.roleName}}</el-checkbox>
                    </el-checkbox-group>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editRoleDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="confirmRole">确定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    const roleOptions = [];
    export default {
        name: "user",
        data(){
            return{
                radio:"0",
                tableData:[],

                currentPage:1,
                pageSize:5,
                total:0,

                addUserFormData:{},
                editUserFormData:{},

                addDialogVisible:false,
                editDialogVisible:false,
                editRoleDialogVisible:false,

                userFormData:{},
                /*多选*/
                roles:[],
                isIndeterminate:true,
                checkAll:false,
                checkedRoles:{},
                formRules:{
                    username:[
                        {required : true, message: '用户名不能为空', trigger:'blur'},
                        {min:2,max:12, message:'长度在 2 到 12字符', trigger: 'blur'},
                        {required: true,pattern:/^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,message: '不支持特殊字符',trigger: 'blur'}
                        ],
                    nickName:[
                        {required : true, message: '昵称不能为空', trigger:'blur'},
                        {min:2,max:12, message:'长度在 2 到 12字符', trigger: 'blur'},
                        {required: true, pattern:/^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/, message: '不支持特殊字符',trigger: 'blur'}
                    ],
                    password:[
                        {required:true,message: '密码不能为空',trigger:'blur'},
                        {min:6,max:16,message:'长度在 6 到 16字符',trigger: 'blur'},
                        {required: true,pattern:/^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,message: '不支持特殊字符',trigger: 'blur'}
                    ],
                }
            }
        },
        created() {
            this.initUserTable();
        },
        methods: {
            /*刷新页面*/
            refreshPage() {
                window.location.reload()
            },
            /*更改用户状态*/
            changeSwitch(val) {
                let that = this;
                this.$http.post(`/system/User/editUserStatusById/${val.isDeleted}/${val.id}`).then(function (resp) {
                    if (resp.data.code === 2000) {
                        that.$message.success(resp.data.msg);
                    }else{
                        that.$message.fail(resp.data.msg);
                    }
                })
            },

            searchBtn(){
                this.initUserTable()
            },
            /*searchRoleBtn(){
                this.initRoleTable()
            },*/
            /*关闭弹出框之前清空所有数据*/
            closeAddDialog(){
                this.$refs.addUserFormRef.resetFields();
            },
            closeEditDialog(){
                this.$refs.editUserFormRef.resetFields();
            },
            /*添加用户*/
            addBtn(){
                this.addUserFormData={};
                //this.title="添加用户信息";
                this.addDialogVisible=true;
            },

            addUser(){
                let that = this;
                this.$refs.addUserFormRef.validate((valid) => {
                    if (valid){
                        this.$http.post(`/system/User/addUser`,this.addUserFormData).then(function (resp) {
                            if (resp.data.code===2000){
                                that.$message.success(resp.data.msg);
                                that.addDialogVisible=false;
                                that.initUserTable();
                            }

                        })
                    }
                })
            },
            /*编辑用户*/
            editBtn(row){
                this.editUserFormData=row;
                this.editDialogVisible=true;
                this.initUserTable();
            },
            editUser(){
                let that = this;
                this.$refs.editUserFormRef.validate((valid) => {
                    if (valid){
                        this.$http.post(`/system/User/editUserMsgById`,this.editUserFormData).then(function (resp) {
                            if (resp.data.code===2000){
                                that.$message.success(resp.data.msg);
                                that.editDialogVisible=false;
                                that.initUserTable();
                            }
                        })
                    }
                    }
                )
            },
            /*删除用户*/
            delBtn(id){
                let that =this;
                this.$http.post(`/system/User/delUserById/${id}`).then(function (resp) {
                    if (resp.data.code===2000){
                        that.$message.success(resp.data.msg);
                        that.initUserTable();
                    }else{
                        that.$message.fail(resp.data.msg);
                    }
                })
            },

            /*设置角色*/
            roleBtn(id){
                this.initRoleTable(id);
                this.editRoleDialogVisible=true;
            },

            handleCheckAllChange(val){
                this.checkedRoles = val ? roleOptions : [];
                this.isIndeterminate = false;
            },
            handCheckedRolesChange(value){
                let checkCount = value.length;
                this.checkAll = checkCount === this.roles.length;
                this.isIndeterminate = checkCount > 0 && checkCount < this.roles.length;
            },
            initRoleTable(userId){
                let that =this;
                this.userId = userId;
                this.$http.get(`/system/Role/selRoleByUserId/${userId}`).then(function (resp) {
                    that.roles = resp.data.result.allRole;
                    that.checkedRoles = resp.data.result.userRoleIds;
                })
            },
            confirmRole(){
                if (confirm("确认给此用户分配以下角色吗？")){
                    let that = this;
                    this.$http.post("/system/UserRole/setUserRole",{userId:this.userId,roleId:this.checkedRoles}).then(function (resp) {
                        if (resp.data.code === 2000) {
                            that.$message({
                                message: resp.data.msg,
                                type: 'success',
                                duration: '1500'
                            });
                            that.editRoleDialogVisible = false;

                        }
                    })
                }
            },
            initUserTable(){
                let that = this;
                this.$http.post(`/system/User/selectAllUser/${this.currentPage}/${this.pageSize}`,this.userFormData).then(function (resp) {
                    if(resp.data.code===2000){
                        that.tableData = resp.data.result.records;
                        that.total = resp.data.result.total;
                    }
                })
            },

            /*分页*/
            handleSizeChange(val){
                this.pageSize = val;
                this.initUserTable();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.initUserTable();
            },

        },
    }
</script>

<style>
   /* .item .el-form-item__label{
        padding-left: 5px;
    }
    .el-dialog__body{
        padding: 20px;
    }*/
    .role_dialog .el-dialog__body{
        padding: 10px 20px 20px;
    }
</style>